<template>
  <div>
    <el-form
      :model="form"
      ref="form"
      :rules="rules"
      label-width="80px"
      :inline="false"
    >
      <el-form-item label="英文">
        <el-input v-model="form.en"></el-input>
      </el-form-item>
      <el-form-item label="中文">
        <el-input v-model="form.cn">
          <el-button slot="append" icon="el-icon-search" @click="trans()" >智能翻译</el-button>
        </el-input>
      </el-form-item>
      <el-form-item label="开始时间">
        <el-input v-model="form.start"></el-input>
      </el-form-item>
      <el-form-item label="结束时间">
        <el-input v-model="form.end"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getWordScreenItem, saveWordScreenItem,trans } from "@/api/video/index";
export default {
  data() {
    return {
      form: {},
      rules: {}
    };
  },
  props: ["screenId",'screenData'],
  watch: {
    screenData: {
      handler: function(val, oldVal) {
        if(val.isAdd){
          this.form={id: 0,video_id: this.screenData.video_id};
          return;
        }
        getWordScreenItem(val.id).then(res => {
          console.log(res.data,111)
          this.form = res.data;
        });
      },
      immediate: true
    },
  },
  methods: {
    onSubmit() {
      saveWordScreenItem(this.form).then(res => {
        if (res.code === 1) {
          this.$emit("save", res.data);
        }
      });
    },
    trans(){
      trans(this.form.en).then(res=>{
        this.form.cn = res.data.trans_result[0]['dst'] 
      })
    }
  }
};
</script>

<style scoped></style>
